<template>
  <div>
    <van-tabs v-model="active" @click="SlectItem">
      <van-tab v-for="(item, index) in titleList" :key="index" :title="item"></van-tab>
    </van-tabs>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="content1" v-for="(item, index) in list" :key="index">
          <div class="head1">
            <img v-if="item.userHeadPortrait != null" width="40" height="40" :src="item.userHeadPortrait | imgPaths" />
            <img v-else src="@/assets/img/defaultAvatar.png" width="40" height="40" alt="" class="back" />

            <div>
              <p class="col-333333 font-15 font-bold-400">{{ item.userInfoName }}</p>
              <van-rate v-model="item.score" :size="14" color="#ffd21e" void-icon="star" void-color="#eee" readonly />
            </div>
          </div>
          <div class="content2">
            <p>
              {{ item.content }}
            </p>
            <div>
              <img
                v-if="item.imgs.length > 0"
                width="72"
                height="72"
                v-for="(itm, index) in item.imgs"
                :key="index"
                :src="itm | imgPaths"
                alt=""
              />
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { PullRefresh, List, Overlay, Tab, Tabs, Rate } from 'vant'
import { getValue, setValue } from '@/utils/auth'
import { getHandle } from '@/api'

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Rate.name]: Rate,
    [PullRefresh.name]: PullRefresh,
    [Overlay.name]: Overlay,

    [List.name]: List
  },
  data() {
    return {
      active: 0,
      titleList: ['全部', '好评', '中评', '差评'],
      value: 5,
      refreshing: false,
      loading: false,
      finished: false,
      params: {
        page: 1,
        perPage: 10,
        recordId: getValue('shopInfo-view-id'),
        queryType: '',
        shield: 0
      },
      list: []
    }
  },
  watch: {},
  created() {
    this.$bridge.register('refresh', data => {
      this.onRefresh()
    })
   // this.onLoad()
  },
  mounted() {},
  methods: {
    onLoad() {
      getHandle(`/agri/api/common/evaluateInfo/queryListPage`, this.params).then(res => {


        res.data.rows.map((item, index) => {
          const objs = {
            content: '',
            userHeadPortrait: '',
            score: '',
            imgs: [],
            userInfoName: ''
          }
          for (var key in item) {
            objs.content = item.content
            objs.userHeadPortrait = item.userHeadPortrait

            objs.score = item.score
            objs.userInfoName = item.userInfoName

            objs.imgs = (!!item.imgs && item.imgs.split(',')) || []
          }
          this.list.push(objs)
        })

        if (this.active === 0) {
          this.titleList[0] = '全部(' + res.data.count + ')'
        } else if (this.active === 1) {
          this.titleList[1] = '好评(' + res.data.count + ')'
        } else if (this.active === 2) {
          this.titleList[2] = '中评(' + res.data.count + ')'
        } else if (this.active === 3) {
          this.titleList[3] = '差评(' + res.data.count + ')'
        }
        this.loading = false
        this.refreshing = false
        this.finished = res.data.rows.length < this.params.perPage
        if (!this.finished) {
          this.params.page += 1
        }
      })
    },
    SlectItem() {
      if (this.active === 0) {
        this.params.queryType = ''
      } else {
        this.params.queryType = this.active
      }
      this.params.page = 1
      this.list = []
      this.onLoad()
    },
    // 下拉刷新
    onRefresh() {

      this.params.page = 1
      this.list = []
      this.onLoad()
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .van-tabs__line {
  display: none;
}
::v-deep .van-tab {
  font-size: 14px;
  color: #666666;
}
::v-deep .van-tab--active {
  color: #37b5b5;
}
.content1 {
  background-color: #fff;
  margin-top: 10px;
  padding: 20px 15px;
  .head1 {
    display: flex;
    align-items: center;
    > img {
      margin-right: 10px;
      border-radius: 50%;
    }
    > div {
      > p {
        margin-bottom: 4px;
      }
    }
  }
  .content2 {
    > p {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
      margin: 10px 0;
    }
    > div {
      > img {
        margin-right: 12px;
      }
    }
  }
}
</style>
